import { Button, Form, Input, message } from "antd";
import "./index.scss";
import { postLogin } from "../../api/uiser";
import { connect } from "react-redux";
import { CHANGE_LOGINSTATE, CHANGE_USERINFO } from "../../store/type";
import { useHistory } from 'react-router-dom'
import { login } from "../../api/pro";
const App = ({ setUserinfo }) => {
  const [form] = Form.useForm();
  const router = useHistory()
  const [messageApi, contextHolder] = message.useMessage();

  const handleOnclick = (e) =>{
    console.log(e)
    /*
    axios({
      url:'/api/login/account',
      data:{
        username:'admin',
        password:'123456',
      },
      method:'post',

    }).then((res)=>{
      console.log(res);
      if(res.data.status === 'ok'){
       router.push('/index')
      }else if(res.data.status === 'error'){
        alert('用户或者密码错误')
      }
    })
    */
    login(e).then(res=>{
      console.log(res);
      if(res.code === 200){
       router.push('/')
       alert('登录成功')
       window.localStorage.setItem('userinfo',JSON.stringify(res.userinfo[0].token))
       
       console.log(res);
      }else {
        alert('用户或者密码错误')
      }
    })
  }

  return (
    <div className="box">
      <div className="login">
        <h2 className="deng">后台登录</h2>
        {contextHolder}
        <Form
          form={form}
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          style={{
            maxWidth: 600,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={handleOnclick}
          autoComplete="off"
        >
          <Form.Item 
            label="登录账号"
            name="phonenumber"
            rules={[
              {
                required: true,
                message: "请输入用户名",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item 
            label="登录密码"
            name="password"
            rules={[
              {
                required: true,
                message: "请输入密码!",
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button type="primary" htmlType="submit" className="btn">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>

  );
};
const mapDispatchToprops = (dispatch) => ({
  setUserinfo(values, messageApi) {
    return new Promise((resolve) => {
      postLogin({
        adminname: values.username,
        password: values.password,
      }).then((res) => {
        console.log(res);
        //判断
        if (res.code !== "200") {
          return messageApi.open({
            type: "error",
            content: res.message,
          });
        }
        messageApi.open({
          type: "success",
          content: res.message,
        });

        //存储数据
        dispatch({ type: CHANGE_USERINFO, payload: res.data })
        dispatch({ type: CHANGE_LOGINSTATE, payload: true })
        //修改promise状态为成功
        resolve()
        // //跳转首页
        // window.location.hash = "/home";
      });
    })
  },
});

export default connect(null, mapDispatchToprops)(App);
